<template>
  <div>
    <button @click="push">jump</button>
    <Input @add="addHandler"/>
    <List :list="list" @delete="deleteHandler"/>
  </div>
</template>

<script>
import Input from './Input'
import List from './List'

export default {
  components: {
    Input,
    List
  },
  data() {
    return {
      list: [
        {
          id: 'id-1',
          title: '标题1'
        },
        {
          id: 'id-2',
          title: '标题2'
        }
      ]
    }
  },
  methods: {
    push(){
      this.$router.push('/')
    },
    addHandler(title) {
      this.list.push({
        id: `id-${Date.now()}`,
        title
      })
    },
    deleteHandler(id) {
      this.list = this.list.filter(item => item.id !== id)
    }
  },
  created() {
    // eslint-disable-next-line
    console.log('index created')
  },
  mounted() {
    // eslint-disable-next-line
    console.log('index mounted')
    console.log(Date.now())
  },
  beforeUpdate() {
    // eslint-disable-next-line
    console.log('index before update')
  },
  updated() {
    // eslint-disable-next-line
    console.log('index updated')
  },
  beforeDestroy() {
    console.log('index beforeDestroy')

  },
  destroyed() {
    console.log('index destroyed')

  }

}
</script>
